<template>
  <el-dialog
    :title=title
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose">
    <el-form label-position="right" label-width="100px" :model="project" :rules="rules" ref="projectForm">
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="project.name"></el-input>
      </el-form-item>
      <el-form-item label="项目负责人" prop="principal">
        <el-input v-model="project.principal"></el-input>
      </el-form-item>
      <el-form-item label="项目描述" prop="desp">
        <el-input type="textarea" :autosize="{minRows:2, maxRows: 8}" v-model="project.desp"></el-input>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="submit('projectForm')">立即创建</el-button>-->
<!--        <el-button @click="resetForm('projectForm')">关闭</el-button>-->
<!--      </el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('projectForm')">取 消</el-button>
      <el-button type="primary" @click="submit('projectForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "Project_dialog",
  props: {
    title: String,
    dialogVisible: Boolean
  },
  data() {
    return {
      project: {
        name: '',
        principal: '',
        desp: ''
      },
      rules: {
        name: [{required: true, message: '请输入项目名称', trigger: 'change'}]
      }
    }
  },
  methods: {
    handleClose() {
      this.$refs['projectForm'].resetFields()
      this.$emit('UpdialogVisible', false)
    },
    // 关闭弹窗
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.handleClose()
    },
    // 提交事件
    submit(formName){
      this.$refs[formName].validate((valid) =>{
        if (valid){
          alert('submit')
        }else {
          console.log('error')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
